<template>
    <div class="tradeRecord">
        <assets-head :title="$t('交易记录')" />
        <div class="content">
            <van-tabs v-model="active" class="w-full px-32 box-border" sticky @click="changeType">

                <van-tab :title="$t('当前委托')" class="font-30">
                  <!--          币币交易的订单不支持全部查询 加了isShowAll-->
                  <select-coin-box :symbol="symbol" @updateCoin="selectItem" :isShowAll="false" />
                  <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
                        @cancelOrder="cancelOrder" />
                </van-tab>
                <van-tab :title="$t('历史委托')">
                  <select-coin-box :symbol="symbol" @updateCoin="selectItem" :isShowAll="false" />
                  <history-item :coinPrice="coinPrice" v-for="item in entrustList" :key="item.order_no" :entrust="item"
                        :state="item.state" @cancelOrder="cancelOrder" />
                </van-tab>
                <van-tab :title="$t('成交历史')" class="font-30">
                  <select-coin-box :symbol="symbol" @updateCoin="selectItem" :isShowAll="false"/>
                  <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
                        @cancelOrder="cancelOrder" />
                </van-tab>
            </van-tabs>
            <div v-if="!entrustList.length" class="flex flex-col justify-center items-center pt-185">
                <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
                <p class="textColor">{{ $t('暂无数据') }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Tabs, Tab, DropdownMenu, DropdownItem } from 'vant';
import EntrustItem from '@/components/entrust-item'
import historyItem from '@/components/history-item'
import TradeApi from "@/API/trading.js";
import { _getCoins, _getHomeList } from '@/API/home.api'
import selectCoinBox from "@/components/selectCoinBox/index.vue";
export default {
    props: {

    },
    components: {
        assetsHead,
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        EntrustItem,
        historyItem,
        selectCoinBox
    },
    data() {
        return {
            active: 0,
            entrustList: [],
            historyList: [],
            finishList: [],
            type: 'orders',
            symbol: '',
            currencyList: [],
            coinPrice: 0
        }
    },
    mounted() {
        this.symbol = this.$route.params.symbol
        this.getOrderList(this.type)
        this.getCoinPrce(this.symbol)
    },
    computed: {
    },
    methods: {
        getCoinPrce(val) {
            _getHomeList(val).then((res) => {
                this.coinPrice = res[0].close
            })
        },
        getOrderList(type) {
            this.entrustList = []
            TradeApi.tradeRecord({
                page_no: 1,
                symbol: this.symbol,
                type: type
            }).then(res => {
                console.log(res.data)
                this.entrustList = res.data;
            }).catch(() => {

            })
        },
        changeType() {
            this.entrustList = [];
            if (this.active == 0) {
                this.type = 'orders'
            } else if (this.active == 1) {
                this.type = 'hisorders'
            } else {
                this.type = 'opponent'
            }
            this.getOrderList(this.type);
        },
        cancelOrder(order) {
            TradeApi.tradeCancel({
                order_no: order,
            }).then(res => {
                this.$toast(this.$t('成功'));
                this.getOrderList(this.type)
            }).catch(() => {

      })
    },
    //选择币种
    selectItem(symbol) {
      this.symbol = symbol
      this.getOrderList(this.type)
      this.getCoinPrce(symbol)
    },
  }
}
</script>

<style lang="scss" scoped>
.tradeRecord {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;

    @include themify() {
        background: themed("main_background");
    }

    ::v-deep .van-tab {
        @include themify() {
            color: themed("text_color");
        }
    }

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("tab_background");
        }

    }

    ::v-deep .van-tab--active {
        background: #1194F7;
        border-radius: 5px;
        color: #fff !important;
    }

    ::v-deep .van-nav-bar {
        @include themify() {
            background: themed("main_background");
        }
    }

    ::v-deep .van-nav-bar__title {
        @include themify() {
            color: themed("text_color");
        }
    }

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("main_background");
        }
    }

    ::v-deep .van-tabs__line {
        background-color: transparent !important;

    }
}

.listItem {
    border-bottom: 1px solid #484756;
    display: flex;
    justify-content: space-between;
}

</style>
